<template>
  <div class="container">
    <a-card :bordered="false">
      <a-row>
        <a-col :span="16" style="margin-bottom:10px;">
          <a-button v-if="$auth('FEEDBACK.USER_FEEDBACK_EXPORT')" type="primary" @click="exportTap">
            {{ $t('all.autotext1581') }}
          </a-button>
        </a-col>
      </a-row>
      <s-table
        tableLayout="fixed"
        :columns="columns"
        :data="loadData"
        :row-key="record => record.id"
        ref="tableRef"
      >
        <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="pureContent" slot-scope="text, record">
          <div class="content">{{ record.pureContent }}</div>
        </template>
        <template slot="statusChange" slot-scope="text, record">
          <a-tag :color="statusColor(record)">{{ record.statusName }}</a-tag>
        </template>
        <template slot="createTimeFormat" slot-scope="text, record">
          {{ record.createTime | moment('YYYY-MM-DD HH:mm') }}
        </template>
        <template slot="replyTimeFormat" slot-scope="text, record">
          <span v-if="record.replyTime">{{ record.replyTime | moment('YYYY-MM-DD HH:mm') }}</span>
          <span v-else>-</span>
        </template>
        <template slot="operate" slot-scope="text, record">
          <a v-if="record.status == 0 ? true:false" @click="clickConfirmStatus(record)" style="margin-right:10px">{{ $t('all.autotext1609') }}</a>
          <a v-if="record.status == 1 ? true:false" @click="clickSureStatus(record)" style="margin-right:10px">{{ $t('all.autotext1610') }}</a>
          <a @click="clickSee(record)">{{ $t('all.autotext1584') }}</a>
          <!-- v-if="$auth('FEEDBACK.FEEDBACK_BOARD_SUB_DETAIL')" -->
        </template>
      </s-table>
    </a-card>
    <feedModal
      v-if="showFeedModal"
      ref="feedRef"
      @ok="getList"
      @close="showFeedModal = false"
    >
    </feedModal>
    <feed-sure-modal
      v-if="showFeedSureModal"
      @ok="getList"
      @close="showFeedSureModal = false"
      ref="FeedSureModal"
    >
    </feed-sure-modal>
  </div>
</template>

<script>
import feedModal from './components/feedModal'
import FeedSureModal from './components/feedSureModal'
import { exportXls, listPage, confirmStatus } from '@/api/feedback/feedback'
import { exportExcel } from '@/utils/util'
import { addLog } from '@/api/system/log'
export default {
  components: { FeedSureModal, feedModal },
  data () {
    return {
      showFeedSureModal: false,
      showFeedModal: false,
      isAdmin: 0,
      columns: [
        // {
        //   title: '序号',
        //   width: 80,
        //   ellipsis: true,
        //   scopedSlots: { customRender: 'index' }
        // },
        {
          title: this.$t('all.autotext1612'),
          key: 'id',
          width: 80,
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: this.$t('all.autotext1574'),
          key: 'title',
          width: 150,
          dataIndex: 'title'
        },
        {
          title: this.$t('all.autotext1573'),
          key: 'typeName',
          width: 100,
          align: 'center',
          dataIndex: 'typeName'
        },
        {
          title: this.$t('all.autotext1576'),
          key: 'pureContent',
          width: 250,
          dataIndex: 'pureContent'
        },
        {
          title: this.$t('all.autotext1606'),
          key: 'createName',
          width: 100,
          align: 'center',
          dataIndex: 'createName'
        },
        {
          title: this.$t('all.autotext1613'),
          key: 'createTime',
          width: 120,
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTimeFormat' }
        },
        {
          title: this.$t('all.autotext1604'),
          key: 'replyTime',
          width: 120,
          dataIndex: 'replyTime',
          scopedSlots: { customRender: 'replyTimeFormat' }
        },
        {
          title: this.$t('all.autotext1599'),
          key: 'statusName',
          width: 100,
          align: 'center',
          dataIndex: 'statusName',
          scopedSlots: { customRender: 'statusChange' }
        },
        {
          title: this.$t('all.autotext1585'),
          key: 'operate',
          width: 160,
          scopedSlots: { customRender: 'operate' }
        }
      ],
      loadData: parameter => {
        return listPage(parameter).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    getList () {
      this.$refs.tableRef.refresh(true)
    },
    // 导出
    async exportTap () {
      const res = await exportXls()
      this.$message.success(this.$t('all.autotext1582'))
      exportExcel(this.$t('all.autotext1614'), res.data)
    },
    // 查看
    clickSee (record) {
      this.showFeedModal = true
      this.$nextTick(() => (
        this.$refs.feedRef.open(record.id)
      ))
      addLog({
        id: record.id,
        proId: record.proId,
        operation: '系统通知-用户反馈-反馈详情'
      })
    },
    // 确认解决
    clickConfirmStatus (record) {
      const that = this
      this.$confirm({
        title: this.$t('all.autotext1615'),
        onOk () {
          confirmStatus({
            id: record.id
          }).then(res => {
            that.$message.success('操作成功！')
            that.getList()
          }).finally(res => {
            return true
          })
        },
        onCancel () {}
      })
    },
    clickSureStatus (record) {
      this.showFeedSureModal = true
      this.$nextTick(() => (
        this.$refs.FeedSureModal.handleConfirm(record)
      ))
    },
    statusColor (record) {
      let color = ''
      switch (record.status) {
        case 0: color = 'red'
          break
        case 1: color = 'orange'
          break
        case 2: color = 'cyan'
          break
        default: break
      }
      return color
    }
  }
}
</script>
<style lang="less" scoped>
  .content {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
